<!-- 文章展示 -->
<template>
	<s-layout :bgStyle="{ color: '#FFF' }" :title="state.title" class="set-wrap">
		<view class="ss-p-30 richtext"><mp-html :content="state.content"></mp-html></view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import ArticleApi from '@/sheep/api/promotion/article';

	const state = reactive({
		id: null,
		title: '平台规则',
		content: '',
	});

	async function getRichTextContent(id, title) {
		const {
			code,
			data
		} = await ArticleApi.getArticle(id, title);
		if (code !== 0) {
			return;
		}
		state.content = data.content;
		// 标题不一致时，修改标题
		if (state.title !== data.title) {
			state.title = data.title;
			uni.setNavigationBarTitle({
				title: state.title,
			});
		}
	}
	// 获取路径参数
	onLoad((query) => {
		if (query.title) {
			state.title = query.title;
		}
		if (query.id) {
			state.id = query.id;
		}
	});
	onShow(() => {
		uni.setNavigationBarTitle({
			title: state.title,
		});
		getRichTextContent(state.id, state.title);
	});
</script>

<style lang="scss" scoped>
	.set-title {
		margin: 0 30rpx;
	}

	:deep() {
		image {
			display: block;
		}
	}
</style>